<template>
  <el-col class="com_class">
    <el-col class="title">充值列表</el-col>
    <el-table
      :data="class_list"
      border
      show-summary
      :summary-method="getSummaries"
      stripe
      size="small"
    >
      <el-table-column type="index" width="50"></el-table-column>
      <el-table-column
        v-for="col in columns"
        :prop="col.id"
        :key="col.id"
        :label="col.label"
        :width="col.width"
      ></el-table-column>
      <el-table-column label="状态">
        <el-tag type="success">充值成功</el-tag>
      </el-table-column>
      <el-table-column
        prop="total1"
        label="合计"
        align="center"
      ></el-table-column>
    </el-table>
    <el-col class="class_bottom">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :page-size="10"
        layout="total, prev, pager, next"
        :total="total"
      ></el-pagination>
      <!-- <el-button type="primary" @click="add_class" size="mini">添加分类</el-button> -->
    </el-col>
  </el-col>
</template>
<script>
export default {
  data() {
    return {
      class_list: [],
      addclass: false,
      editclass: false,
      total: 0,
      columns: [
        {
          id: "created_at",
          label: "充值时间",
        },
        {
          id: "money",
          label: "金额（元）",
        },
        {
          id: "nickName",
          label: "充值用户",
        },
      ],
    };
  },
  mounted() {
    this.getlist("");
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.getlist(val);
    },
    async getlist(page) {
      //获取列表
      let data = {
        page: page,
      };
      let res = await this.$store.dispatch("recharge_log", data);
      this.class_list = res.data.data;
      this.total = res.data.total;
    },
    getSummaries(param) {
      const { columns, data } = param; //这里可以看出，自定义函数会传入每一列，以及数据
      const sums = [];
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = "总计";
          return;
        } else if (index == 2) {
          const values = data.map((item) => Number(item[column.property]));
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr);
            if (!isNaN(value)) {
              return prev + curr;
            } else {
              return prev;
            }
          }, 0);
          return sums[index];
        } else {
          sums[index] = " ";
        }
      });
      return sums; //最后返回合计行的数据
    },
  },
};
</script>
<style lang="scss">
.class_bottom {
  background-color: #ffffff;
  padding-top: 40px;
}
</style>